import styled from 'styled-components'

export const VoiceControlContainer = styled.div`
  position: absolute;
  height: 235%;
  width: 3rem;
  top:0;
  right: 0;
  transform: translate(0,-100%);
  background: rgba(52, 52, 52, 0.57);
  //clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 75% 85%, 50% 99%, 25% 85%, 0% 85%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 75% 90%, 50% 99%, 25% 90%, 0% 90%);
  overflow: visible;
  &.displayNone{
    display: none;
  }

`
export const VoiceControlWrapper = styled.div`
  position: relative;
  height: 90%;
  width: 100%;
  overflow: visible;
  display:flex;
  flex-direction:column;
  justify-content: center;
`

export const ProgressBarContainer = styled.div`
  position: relative;
  width: 100%;
  height: 70%;
  border-radius: 2rem;
  &::before {
    position: absolute;
    background: #b6cbea;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 10%;
    content: "";
    border-radius: inherit;
  }
`


export const FinishBar = styled.div.attrs(props=>({
    style:{
        height: Math.floor(props.progress*100)+"%" || 0
    }
}))`
  position: absolute;
  background: #e48085;
  width: 10%;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  content: "";
  border-radius: inherit;
`
export const Slider = styled.div.attrs(props=>({
    style:{
        bottom:Math.floor(props.progress*100)-3+"%" || 0
    }
}))`
  position: absolute;
  background: rgb(255, 60, 60);
  height: 0.7rem;
  width: 0.7rem;
  left: 50%;
  transform: translateX(-50%);
  border: 0.5px #ffb000 solid;
  border-radius: 50%;
  content: "";
`

export const VolumeProgress = styled.div`
  text-align: center;
  left: 50%;
  font-size: 0.8rem;
`